import React from 'react'
import styles from './index.less'

import {
  Button,
  Input,
  Radio,
} from 'antd'

class Page extends React.Component {

  state = {
    data: []
  }

  //新增题
  handleAddTopic = () => {
    const { data } = this.state
    this.setState({
      data: [
        ...data,
        {
          id: data.length + 1,
          title: '',
          answer: 1,
          children: [{
            id: 1,
            title: ''
          }]
        }
      ]
    })
  }

  //新增选项
  handleAddOption = (subject) => {
    this.setState({
      data: this.state.data.map(item => item.id === subject.id ? {
        ...item,
        children: [
          ...item.children,
          { id: item.children.length + 1, title: '' }
        ]
      } : item)
    })
  }

  //删除题
  handleDelTopic = (subject) => {
    this.setState({
      data: this.state.data.filter(itm => itm.id !== subject.id)
    })
  }

  //删除选项
  handleDelOption = (subject, option) => {
    this.setState({
      data: this.state.data.map(item => item.id === subject.id ? {
        ...subject,
        children: subject.children.filter(t => t.id !== option.id)
      } : item)
    })
  }

  //修改题目
  handleSubjectChange = ({ target }, subject) => {
    this.setState({
      data: this.state.data.map(item => item.id === subject.id ? { ...item, title: target.value } : item)
    })
  }

  //修改选项题目
  handleOptionChange = ({ target }, subject, option) => {
    this.setState({
      data: this.state.data.map(item => item.id === subject.id ? {
        ...subject,
        children: subject.children.map(item => item.id === option.id ? { ...item, title: target.value } : item)
      } : item)
    })
  }

  //修改答案
  handleAnswerChange = ({ target }, subject) => {
    this.setState({
      data: this.state.data.map(item => item.id === subject.id ? { ...item, answer: target.value } : item)
    })
  }

  render() {

    const {
      data
    } = this.state

    return (<div style={{ width: '500px', margin: '20px auto 0' }}>
      <Button type='primary' onClick={this.handleAddTopic}>新增</Button>
      <div style={{ margin: '20px 0' }}>
        {data.map((itm, idx) => (
          <div key={itm.id} style={{ padding: '20px', border: '1px solid #000' }}>
            第{idx + 1}题：<Input placeholder='题目' defaultValue={itm.title} style={{ width: '200px' }} onChange={e => this.handleSubjectChange(e, itm)} />
            <div style={{ margin: '10px 0' }}>
              <Radio.Group onChange={e => this.handleAnswerChange(e, itm)} value={itm.answer}>
                {itm.children.map(t => (
                  <div key={t.id} style={{ marginTop: '6px', paddingLeft: '26px' }}>
                    <Radio value={t.id}>
                      <Input placeholder='选项' defaultValue={t.title} style={{ width: '200px' }} onChange={e => this.handleOptionChange(e, itm, t)} />
                    </Radio>
                    <Button type='danger' onClick={() => this.handleDelOption(itm, t)}>删除</Button></div>
                ))}
              </Radio.Group>
            </div>
            <Button onClick={() => this.handleAddOption(itm)}>新增选项</Button>
            &nbsp;
            <Button type='danger' onClick={() => this.handleDelTopic(itm)}>删除该题</Button>
          </div>
        ))}
      </div>
      <Button onClick={() => console.log(JSON.stringify(data))}>查看结果</Button>
    </div>)

  }

}

export default Page